/*
 * style for mobile from elemets
 * version: 0.5
 * situ
 * 2011-07-27
*/

* {
	-webkit-user-select:none; /* Prevent copy paste for all elements except text fields */
	-webkit-tap-highlight-color:rgba(255, 255, 255, 0); /* set highlight color for user interaction */
} 

input,textarea { -webkit-user-select:text; } /* allow users to select text that appears in input fields */

* {	
	margin:0;
	padding:0;
} /* Remove default padding and margins for all elements */

img { border:none; } /* Remove default borders for images */

body {
	overflow-x:hidden;
	-webkit-text-size-adjust:none;
	font-family:Arial, Helvetica, sans-serif;
	color:#ff00ff;
	font-size:14px;
	/*background:rgba(19,29,38,1);*/ /* primary background color */
	
	
	display: -webkit-box;
    /* We want to layout our first container vertically */
    -webkit-box-orient: vertical;
    /* we want our child elements to stretch to fit the container */
	-webkit-box-align:stretch;
	
} /* General styles that apply to elements not contained within other classes and styles */

/**********************************************************
	FORM ELEMENTS
**********************************************************/

* { -webkit-box-sizing:border-box; box-sizing:border-box; }

fieldset h4 {
	text-align:left;
	font-family: Helvetica, Arial, sans-serif;
	color:#a8b4bb;
	font-weight:bold;
	font-size:18px;
	line-height:21px;
	margin-bottom:-8px; margin-top:8px;
	text-shadow:1px 1px 3px rgba(0, 0, 0, 0.9);
} /* Style for subhead for a group of labels/inputs within a fieldset. */


fieldset {
	margin:12px 8px;
	padding:12px 18px 12px 18px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #595d61;
	outline:0;
	width:95%;

} /* Styles the border line, background image and spacing for fieldsets. */

fieldset p {
	display:block;
	position:relative;
	overflow:hidden;
	padding:0px;
	padding-bottom:8px;
	padding-top:8px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:10px;
	background:transparent;
	height:37px !important;
	-webkit-box-shadow:none;
} /* The paragraph within a fieldset is used as a wrapper to help manage the replacement of native input elements. */

legend {
	margin:0;
	font-family:Helvetica, Arial, sans-serif;
	font-size:18px;
	font-weight:bold;
	overflow:hidden;
	color:#ccc;
	text-transform:uppercase;
	text-shadow:1px 1px 3px rgba(0, 0, 0, 0.9);
} /* This is the name that appears at the top left of the fieldset. */

textarea.mobile-ui-form { 
	display:block;
	margin-top:4px; margin-bottom:18px;
	padding:8px;
	border:solid 1px #999;
	outline:0;
	color:#fff;
	background:#595D61;
	-webkit-border-radius:6px; border-radius:6px;
	-webkit-box-shadow:inset 2px 2px 6px rgba(0,0,0,.5); box-shadow:inset 2px 2px 6px rgba(0,0,0,.5);
	width:85%;
	min-height:150px;
	line-height:120%;
} /* These properties determine the look of textarea inputs. */


input.mobile-ui-form { 
	
	display:inline-block;
	width:65%;
	margin-top:4px; margin-bottom:12px;
	padding:8px;
	border:solid 1px #999;
	outline:0;
	color:#fff;
	background:#595D61;
	-webkit-border-radius:6px; border-radius:6px;
	-webkit-box-shadow:inset 2px 2px 6px rgba(0,0,0,.5); box-shadow:inset 2px 2px 6px rgba(0,0,0,.5);
} /* These properties combine to create the look of the input fields. */



input.mobile-ui-form:hover, textarea.mobile-ui-form:hover, input.mobile-ui-form:focus, textarea.mobile-ui-form:focus { border-color:#ccc; } /* Changes the border color of the input field while active. */


input.mobile-ui-form[type=checkbox] ,input.mobile-ui-form[type=radio]  {
	position: absolute;
    left: 0;
	-webkit-appearance: none;
	opacity:0;
	margin-bottom:30px;
    width:0px;
} /* Blocks rendering of the native radio controls. */

input.mobile-ui-form[type=checkbox] + label,input.mobile-ui-form[type=radio] + label { 
	
	float:left;
	font-size:15px;
	font-weight:bold;
	line-height:26px; /* changing this value will change the vertical relationship to the radios & checkboxes. */
	margin-left:10px;
	padding-left:30px;
	background:url() 0 0px no-repeat;
	background-repeat:none;
	height:25px;
	
} /* Styling for the labels. */


/* Following block of paragraph classes sets up the usage of the custom radio and checkbox graphics. */


input.mobile-ui-form[type=radio] + label { background-position:0 -225px; }
input.mobile-ui-form[type=checkbox] + label { background-position:0 -25px; }

/* Styles for "checked." */
input.mobile-ui-form[type=radio]:checked + label { background-position:0 -300px; }
input.mobile-ui-form[type=radio]:hover:checked + label,
input.mobile-ui-form[type=radio]:focus:checked + label,
input.mobile-ui-form[type=radio]:checked + label:hover,
input.mobile-ui-form[type=radio]:focus:checked + label { background-position:0 -300px; }

input.mobile-ui-form[type=checkbox]:checked + label { background-position:0 -100px; }
input.mobile-ui-form[type=checkbox]:hover:checked + label,
input.mobile-ui-form[type=checkbox]:focus:checked + label,
input.mobile-ui-form[type=checkbox]:checked + label:hover,
input.mobile-ui-form[type=checkbox]:focus:checked + label { background-position:0 -100px; }


/* Styles for "hover/focus." */
input.mobile-ui-form[type=checkbox]:hover + label,
input.mobile-ui-form[type=checkbox]:focus + label,
input.mobile-ui-form[type=checkbox] + label:hover { background-position:0 -0x; }

input.mobile-ui-form[type=radio]:hover + label,
input.mobile-ui-form[type=radio]:focus + label,
input.mobile-ui-form[type=radio] + label:hover { background-position:0 -200px; }

/* Styles for "active." */
input.mobile-ui-form[type=checkbox]:active + label,
input.mobile-ui-form[type=checkbox] + label:hover:active { background-position:0 -0px; }

input.mobile-ui-form[type=radio]:active + label,
input.mobile-ui-form[type=radio] + label:hover:active { background-position:0 -200px; }


input.mobile-ui-form[type=checkbox]:active:checked + label,
input.mobile-ui-form[type=checkbox]:checked + label:hover:active { background-position:0 -100px; }

input.mobile-ui-form[type=radio]:active:checked + label,
input.mobile-ui-form[type=radio]:checked + label:hover:active { background-position:0 -300px; }

/* Styles for "disabled." */
input.mobile-ui-form[type=checkbox]:disabled + label,
input.mobile-ui-form[type=checkbox]:hover:disabled + label,
input.mobile-ui-form[type=checkbox]:focus:disabled + label,
input.mobile-ui-form[type=checkbox]:disabled + label:hover,
input.mobile-ui-form[type=checkbox]:disabled + label:hover:active { background-position:0 -175px; opacity:.5 !important; }

input.mobile-ui-form[type=radio]:disabled + label,
input.mobile-ui-form[type=radio]:hover:disabled + label,
input.mobile-ui-form[type=radio]:focus:disabled + label,
input.mobile-ui-form[type=radio]:disabled + label:hover,
input.mobile-ui-form[type=radio]:disabled + label:hover:active { background-position:0 -250px; opacity:.5 !important; }

input.mobile-ui-form[type=checkbox]:disabled:checked + label,
input.mobile-ui-form[type=checkbox]:hover:disabled:checked + label,
input.mobile-ui-form[type=checkbox]:focus:disabled:checked + label,
input.mobile-ui-form[type=checkbox]:disabled:checked + label:hover,
input.mobile-ui-form[type=checkbox]:disabled:checked + label:hover:active { background-position:0 -200px; opacity:.5 !important; }

input.mobile-ui-form[type=radio]:disabled:checked + label,
input.mobile-ui-form[type=radio]:hover:disabled:checked + label,
input.mobile-ui-form[type=radio]:focus:disabled:checked + label,
input.mobile-ui-form[type=radio]:disabled:checked + label:hover,
input.mobile-ui-form[type=radio]:disabled:checked + label:hover:active { background-position:0 -375px; opacity:.5 !important; }

input.mobile-ui-form[type=radio]:active:checked + label,
input.mobile-ui-form[type=checkbox]:active:checked + label,
input.mobile-ui-form[type=radio]:active + label,
input.mobile-ui-form[type=checkbox]:active + label,
input.mobile-ui-slider[type=checkbox]:checked + label ,
input.mobile-ui-slider[type=radio]:checked + label 
{ background-position:-28px 0px; }


/********    slider controls */
input.mobile-ui-slider {
	position:absolute;
	left:0;
	opacity:0;
	 -webkit-appearance: none;
} /* Blocks rendering of the native radio controls. */

	
input.mobile-ui-slider + label { 

	float:left;
	font-size:15px;
	font-weight:normal;
	line-height:24px; /* changing this value will change the vertical relationship to the radios & checkboxes. */
	margin-left:10px;
	padding-left:57px;
	color:#ff0000; 
	background-image: url();
	height:24px;
	width:57px;
	display:inline-block;
   -webkit-transition: all 0.3s  ease-in-out;

} 
input.mobile-ui-slider[type=radio]:disabled:checked + label,
input.mobile-ui-slider[type=radio]:focus:disabled:checked + label,
input.mobile-ui-slider[type=checkbox]:disabled:checked + label,
input.mobile-ui-slider[type=checkbox]:focus:disabled:checked + label
{ background-position:-29px 0px; opacity:.7 !important;}

/* Styles for "disabled." */
input.mobile-ui-slider[type=checkbox]:disabled + label,
input.mobile-ui-slider[type=checkbox]:focus:disabled + label,
input.mobile-ui-slider[type=radio]:disabled + label,
input.mobile-ui-slider[type=radio]:focus:disabled + label
{ background-position:0 0; opacity:.7 !important; }

